<template>
	<view class="layout">
		<public-nav-item isBack="true" :title="navtitle"></public-nav-item>
		<view class="goods-list">
			<!-- 单独一个 -->
			<view class="goods-img-box" v-for="item in fordian[0]">
				<view class="goods-img">
					<image src="../../static/bg1.png" mode=""></image>
				</view>
				<view v-show="item.is_hot? true : false" class="goods-icon">
					<!-- 热卖 -->
					<view class="goods-hot">{{ item.title }}</view>
				</view>
				<view class="goods-title">
					商品名字
				</view>
				<view class="goods-li">
					<view class="goods-price">Y{{ item.price }}</view>
					<view class="goods-sold">已卖{{ item.sold }}</view>
				</view>
				<view class="goods-address">
					<view class="goods-type" v-show="item.type_offical===1 ? true:false ">官方</view>
					<view class="goods-typeone" v-show="item.type_offical===2 ? true: false ">门店自营</view>
					<view class="goods-ad">{{ item.content }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref,reactive } from 'vue'	
import { onLoad,onLaunch } from '@dcloudio/uni-app'


const fordian = ref([
		[{
				title: '热卖',
				content: '执行食物疑难问题',
				price: 22,
				sold: 123,
				type_offical:2,
				is_hot:true
			},
			{
				title: '热卖',
				content: '杭州食物疑难问题',
				price: 22,
				sold: 123,
				type_offical:3,
				is_hot:false
			},
			{
				title: '热卖',
				content: '执行食物疑难问题',
				price: 22,
				sold: 123,
				type_offical:1,
				is_hot:false
			},
			{
				title: '热卖',
				content: '执行食问题',
				price: 22,
				sold: 123,
				type_offical:2,
				is_hot:false
			},
			{
				title: '热卖',
				content: '执行食物疑难问题',
				price: 22,
				sold: 123,
				type_offical:2,
				is_hot:true
			},
			{
				title: '热卖',
				content: '执行食物疑难问题',
				price: 22,
				sold: 123,
				type_offical:3,
				is_hot:true
			},
			{
				title: '热卖',
				content: '执行食物疑难问题',
				price: 22,
				sold: 123,
				type_offical:2,
				is_hot:true
			},
			{
				title: '名字1',
				content: '执行食物疑难问题',
				price: 23,
				sold: 123,
				type_offical:1,
				is_hot:true
			}
		]
	])
	
	const navtitle = ref('')
	onLoad((props) => {
		console.log(props)
		navtitle.value = props.title
	})
</script>

<style lang="scss" scoped>
	.goods-list {
		width: 702rpx;
		height: 1520rpx;
		// border: 1px solid red;
		margin: 24rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-gap: 24rpx;

		// border: 1px solid red;

		.goods-img-box {
			position: relative;
			width: 339rpx;
			height: 362rpx;
			background: #ffffff;

			.goods-img {
				width: 339rpx;
				height: 198rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.goods-icon {
				position: absolute;
				top: 0;
				right: 0;
				background-color: #ef0a19;
				width: 72rpx;
				height: 48rpx;
				border-bottom-left-radius: 20rpx;
				border-top-right-radius: 10rpx;
				line-height: 48rpx;
				color: #efefef;

				.goods-hot {
					width: 48rpx;
					height: 32rpx;
					line-height: 32rpx;
					font-size: 24rpx;
					font-weight: 350;
					// border: 1px solid white;
					margin: 8rpx 12rpx;
				}
			}

			.goods-title {
				width: 307rpx;
				height: 44rpx;
				font-size: 28rpx;
				line-height: 44rpx;
				font-weight: 500;
				margin: 8rpx 16rpx;
				// border: 1px solid red;
			}

			.goods-li {
				display: flex;
				width: 307rpx;
				// border: 1px solid red;
				margin: 0 16rpx;

				.goods-price {
					width: 146rpx;
					height: 44rpx;
					color: #ef0a19;
					font-weight: 600;
				}

				.goods-sold {
					width: 108rpx;
					height: 44rpx;
					line-height: 44rpx;
					color: #cccccc;
					font-size: 24rpx;
					margin-left: 55rpx;
				}
			}

			.goods-address {
				width: 307rpx;
				height: 36rpx;
				line-height: 36rpx;
				// border: 1px solid red;
				margin: 8rpx 16rpx;
				display: flex;

				.goods-type {
					width: 44rpx;
					height: 22rpx;
					font-size: 22rpx;
					line-height: 22rpx;
					// border: 1px solid #ef0a19;
					border-radius: 3rpx;
					background: #EBC980;
					margin: 5rpx 8rpx 5rpx 0;
					padding: 2rpx 4rpx;
				}

				// 第二种门店
				.goods-typeone {
					width: 88rpx;
					height: 22rpx;
					line-height: 22rpx;
					background: #000000;
					color: #ffffff;
					margin: 7rpx 8rpx 7rpx 0;
					font-size: 22rpx;
					font-weight: 400;
					padding: 2rpx 4rpx;
					border-radius: 4rpx;
				}

				.goods-ad {
					font-size: 24rpx;
				}
			}
		}
	}
</style>